<template>
	<view>
		<!-- 顶部背景图 -->
		<view class="top-img  ">
			<view class=" top-content">
				<view class="mb30 f40">
					Hi~您好
				</view>
				<view class="bcX" style="color: #D9F4F1;">
					<view class="f32">请选择您要选择的问题</view>
					<!-- 投诉建议 -->
					<image @click="complain()" src="../../static/keFu/a3.png" mode="widthFix" style="width: 214rpx;"></image>
				</view>
			</view>
		</view>
		<!-- 帮助中心 -->
		<view class="plr20" style="margin-top: -100rpx;position: relative;z-index: 1000;">
			<view class="helpCenter plr40 ">
				<view class="bcX rimb3 pb30">
					<view class="helpTit">
						帮助中心
					</view>
					<view class="cY" @click="lookAll()">
						<text class="mr20" style="color: #A3A3A3;">查看全部</text>
							<image src="../../static/my/jiantou.png" mode="scaleToFill" style="width: 16rpx;height: 24rpx;" lazy-load="true"></image>
					</view>
				</view>
				<view class="bcX mt20 ptb30 rimb3 " v-for="(item,index) in problemList" @click="enterProblem(index)">
					<view class="cY">
						<image :src="item.icon" mode="scaleToFill" style="width: 44rpx;height: 46rpx;"></image>
						<view class="com-tit ml30">
							{{item.name}}
						</view>
					</view>
					<view class="cX" >
						<image src="../../static/my/jiantou.png" mode="scaleToFill" style="width: 16rpx;height: 24rpx;" lazy-load="true"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 在线联系和拨打热线 -->
		<view class="plr60 mt60 contract-btn">
			<view class="" style="display: flex;justify-content: space-around;">
				<contact-button :tnt-inst-id="information.tntInstId" :scene="information.scene" size="137"
					:alipay-card-no="thirdId" icon="../../static/keFu/a1.png" />
				<image @click="goTel()" src="../../static/keFu/a2.png" mode="scaleToFill" style="height: 79rpx;width: 272rpx;"></image>
			</view>
			<view class="mt30 tc time">
				<text class="mr20">客服时间:</text>
				<text class="mr10">周一至周日</text>
				<text>9:00~18:00</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getZWZUserDetail,
	} from "@/utils/index.js"
	import {
		queryOpeNotice,
	} from '../../api/index.js'
	export default {
		data() {
			return {
				information: '',
				thirdId: getZWZUserDetail().thirdId,
				phone: '',
				tel: '',
				problemList: []//问题列表
			}
		},
		onLoad(e) {
			this.information=this.$getGlobalData("information")
			this.queryOpeNotice()
		},
		methods: {
			// 客服首页
			queryOpeNotice() {
				queryOpeNotice({
					method: 'POST',
					data: {}
				}).then(res => {
					if (res.statusCode === 200) {
						this.phone = res.data.data.platformServiceTelList[0]
						this.tel = res.data.data.platformServiceTelList[1]
						this.problemList=res.data.data.tabList
					}
				})
			},
			// 拨打客服
			goTel() {
				uni.makePhoneCall({
					phoneNumber: this.tel
				})
			},
			// 查看全部,进入客服问题页面,默认第一个tab
			lookAll(){
				uni.navigateTo({
					url:'../keFuProblems/keFuProblems?num='+0
				})
			},
			// 点击其它,跳转对应的tab
			enterProblem(index){
				uni.navigateTo({
					url:'../keFuProblems/keFuProblems?num='+index
				})
			},
			// 投诉建议
			complain(){
				uni.navigateTo({
					url:'../complain/complain'
				})
			}

		}
	}
</script>

<style>
	page {
		height: 100vh;
		width: 750rpx;
		background-color: #F6F6F6;
	}

	.top-img {
		color: #FFFFFF;
		position: relative;
		width: 750rpx;
		height: 400rpx;
		/* height: 360rpx; */
		background: url('../../static/keFu/Bj.png') center center/100% 100% no-repeat;
	}

	.keFu-tit {
		position: absolute;
		top: 110rpx;
		left: 40rpx;
	}

	.top-content {
		padding-left: 40rpx;
		width: 650rpx;
		position: absolute;
		bottom: 120rpx;
	}

	.helpCenter {
		padding-top: 40rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
	}

	.helpTit {
		font-weight: 600;
		font-size: 38rpx;
		color: #7f7f7f;
	}

	.com-tit {
		font-weight: 500;
		color: #818181;
	}

	.time {
		font-size: 22rpx;
		color: #B6B6B6;
	}

	.contract-btn {
		padding-bottom: 120rpx;
	}
</style>
